<template>
  <div id="head">
      <div class="container-fluid">
          <div class="container">
            <div class="left">
              <i class="iconfont icon-xiaomixinLogo"></i>
            </div>
             <div class="cen">
               <ul>
                 <li><span>小米手机</span></li>
                 <li><span>Redmi 红米</span></li>
                 <li><span>电视</span></li>
                 <li><span>笔记本</span></li>
                 <li><span>平板</span></li>
                 <li><span>家电</span></li>
                 <li><span>路由器</span></li>
                 <li><span>智能硬件</span></li>
               </ul>
             </div>
          <div class="ri">
            <div class="inp">
              
                <input type="text">
              <div class="yy">
                <i class="iconfont icon-soushuo"></i>
              </div>
              
            </div>
          </div>
          </div>
         
      </div>
  </div>
</template>

<script>
export default {

}
</script>

<style lang='scss' scopen>
#head{
  height: 100px;
  line-height: 100px;
  .container-fluid{
  .container{
  width: 1226px;
  margin:0 auto;
  display: flex;
   height: 100px;
  .left{
    flex: 1.5;
    i{
      cursor: pointer;
      color: chocolate;
      font-size: 60px;
    }
  }
  .cen{
    flex: 7;
    ul{
      li{
        display: inline-block;
        margin: 0 10px;
        cursor: pointer;
        color: #333;
        font-size: 16px;
        &:hover{
          color: #ff6700;
        }
        }
    }
  }
  .ri{
    box-sizing: border-box;
   
    flex: 3.5;
    .inp{
      padding-left: 10px;
    //   position: relative;
      margin-top: 25px;
      width: 310px;
      height: 50px;
      line-height: 50px;
      border: 1px solid #e0e0e0;
      
      input{
        width: 245px;
        height: 45px;
        border: none;
        outline: none;
      }
      .yy{
        width: 53px;
        display: inline-block;
        text-align: center;
        height: 50px;
        border-left: 1px solid #e0e0e0;
        cursor: pointer;
        &:hover{
          background-color: #ff6700;
        }
        &:hover i{
          color: #fff;
        }
        i{
        font-size: 15px;
        
      }
      }
     }
  }
}}
}
</style>